// 政策公告
import React, { useEffect, useState } from 'react';
import {List, Input, message,ConfigProvider} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import zhCN from 'antd/lib/locale/zh_CN';
import {highLight, iconListNew} from '@/utils/util';
import {getEightPolicyAnnouncement,getEightLatestPolicy} from '@/services/homePage/homePage';
import styles from './index.less';
import {history, connect} from "umi";

const { Search } = Input;

const PolicyAnnouncementTable: React.FC = (props) => {
  const {dispatch,CurrentState} = props;
  const [tabKey, setTabKey] = useState('latestPolicy');
  const [announcementData, setAnnouncementData] = useState([]);
  const [latestPolicyData, setLatestPolicyData] = useState([]);
  const [announcementKeywords,setAnnouncementKeywords]=useState();
  const [latestPolicyKeywords,setLatestPolicyKeywords]=useState();

  const onAnnouncementSearch = (value: any) => {
    setAnnouncementKeywords(value);
  }
  const onLatestPolicySearch = (value: any) => {
    setLatestPolicyKeywords(value);
  }
  useEffect(() => {
    getEightPolicyAnnouncement({title:announcementKeywords}).then((resp)=>{
      setAnnouncementData(resp?.results);
    }).catch((error) => {
      throw error;
    });

    getEightLatestPolicy({title:latestPolicyKeywords}).then((resp)=>{
      setLatestPolicyData(resp?.results);
    }).catch((error) => {
      throw error;
    });

  }, [announcementKeywords,latestPolicyKeywords,tabKey]);


  const getSearch = (tabKey: string) => {
    if(tabKey === 'announcement'){
      return (
        <div>
          <Search
            placeholder="请输入搜索内容"
            onSearch={onAnnouncementSearch}
            enterButton
            className={styles.SearchInput}
          />
        </div>
      )
    }
    return (
      <div>
        <Search
          placeholder="请输入搜索内容"
          onSearch={onLatestPolicySearch}
          enterButton
          className={styles.SearchInput}
        />
      </div>
    )
  }

  const gotoNewsDetail = (news: any) => {
    try {
      highLight(dispatch,'NewsCenter')
      window.open(`#/newsDetail?id=${news}`);
    } catch (error) {
      message.error('请联系管理员');
    }
  }
  const gotoNews=()=>{
    history.push({ pathname: '/NewsCenter' })
    highLight(dispatch,'NewsCenter')
  }
const gotoPolicyLib=()=>{
    history.push({
    pathname:'/policyLib'
  })
  highLight(dispatch,'policyLogin')
}
  return (
    <ConfigProvider locale={zhCN}>
      <div className={styles.AnnouncementWrapper}>
        <div className={styles.AnnouncementTitle}>
          <div className={styles.titleLeft}>
            <div className={styles.sideShortBar}></div>
            <div className={styles.titleText}>政策公告</div>
          </div>
        </div>
        <div className={styles.AnnouncementList}>
          <PageContainer
            tabBarExtraContent={
              getSearch(tabKey)
            }
            tabList={[
              {
                tab: '最新政策',
                key: 'latestPolicy',
              },
              {
                tab: '新闻公告',
                key: 'announcement',
              },
            ]}
            onTabChange={(key) =>{
              setTabKey(key);
              setAnnouncementKeywords(undefined);
              setLatestPolicyKeywords(undefined);
            }
            }
          >
            <div>
              {tabKey === 'announcement' && (
                <div>
                  <div className={styles.moreText}>
                    <a onClick={gotoNews.bind('')}>更多 ></a>
                  </div>
                  <List
                    footer={<div className={styles.listFooter}></div>}
                    bordered={false}
                    dataSource={announcementData}
                    renderItem={(item) => (
                      <List.Item key={item.id}>
                        <List.Item.Meta
                          avatar={
                            item.isNew === '01' &&
                            <img src={iconListNew}/>
                          }
                          title={
                            <div className={styles.listItem}>
                              <a target="_blank" className={styles.listItemTitle} onClick={gotoNewsDetail.bind('', item.id)} title={item.title}>{item.title}</a>
                              <div className={styles.listItemDate}>{item.publishTime}</div>
                            </div>
                          }
                        />
                      </List.Item>
                    )}
                  />
                </div>
              )}
              {tabKey === 'latestPolicy' && (
                <div>
                  <div className={styles.moreText}>
                    <a onClick={gotoPolicyLib.bind('')}> 更多 ></a>
                  </div>
                  <List
                    footer={<div className={styles.listFooter}></div>}
                    bordered={false}
                    dataSource={latestPolicyData}
                    renderItem={(item) => (
                      <List.Item key={item.id}>
                        <List.Item.Meta
                          title={
                            <div className={styles.listItem}>
                              <a
                                target="_blank"
                                className={styles.listItemTitle}
                                href={item?.fileUrl}
                                title={item.title}
                              >{item.title}</a>
                              <div className={styles.listItemDate}>{item.releaseTime}</div>
                            </div>
                          }
                        />
                      </List.Item>
                    )}
                  />
                </div>
              )}
            </div>
          </PageContainer>
        </div>
      </div>
    </ConfigProvider>

  );
};

export default connect(
  ({news,current})=>({
    CurrentState: current.CurrentState,
  })
)(PolicyAnnouncementTable);
